<template>
  <div class="essay-question-container topic_item">
    <div class="question">
      <span>{{ topic.order }}.&nbsp;</span>{{ topic.title }}
    </div>
    <el-input
      :disabled="disabled"
      @blur="inputBlur"
      type="textarea"
      :rows="8"
      placeholder="请输入内容"
      v-model="textarea"
      resize="none"
    >
    </el-input>
    <answer-explain
      v-if="type == 3"
      :reviewResult="reviewResult"
    ></answer-explain>
  </div>
</template>

<script>
import AnswerExplain from "@/components/AnswerExplain.vue";

// 问答题
export default {
  props: ["topic", "finish", "type", "answer", "reviewResult"],
  data() {
    return {
      textarea: "",
    };
  },
  components: {
    AnswerExplain,
  },
  methods: {
    inputBlur() {
      // console.log(this.textarea);
      this.finish(this.topic.order - 1, this.textarea);
    },
  },
  computed: {
    disabled() {
      return this.type == 2 || this.type == 3;
    },
  },
  mounted() {
    this.textarea = this.answer;
  },
};
</script>

<style lang='less' scoped>
.essay-question-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .question {
    margin-bottom: 20px;
  }
}
</style>